class Enlarge {
    constructor(el) {
        this.el = document.querySelector(el)
        this.img = this.el.querySelector('.img')
        this.mask = this.el.querySelector('.mask')
        this.enlarge = this.el.querySelector('.enlarge')
        this.init()
    }
    init() {
        this.overOut()
        this.maskMove()
        this.tbEnlarge()
    }
    overOut()
    {
        this.img.onmouseover = () => this.mask.style.display = this.enlarge.style.display = 'block'
        this.img.onmouseout = () => this.mask.style.display = this.enlarge.style.display = 'none'
    }

    maskMove() 
    {
        this.img.onmousemove = (evt) => {
            let e = evt || window.event
            let x = e.pageX - this.el.offsetLeft - this.mask.offsetWidth/2
            let y = e.pageY - this.el.offsetTop - this.mask.offsetHeight/2
            if(x<0) x=0
            if(y<0) y=0
            let maxLeft = this.img.clientWidth - this.mask.offsetWidth
            let maxTop = this.img.clientHeight - this.mask.offsetWidth
            if(x>maxLeft) x=maxLeft
            if(y>maxTop) y=maxTop
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'
            this.tbEnlarge(x,y)
        }
    }

    tbEnlarge(x,y)  
    {
        this.enlarge.style.backgroundPosition = `-${x*2}px -${y*2}px`
    }
}
export default Enlarge 